<template>
  <div class="profile-container">
    <div v-if="currentUser" class="profile-content">
      <div class="profile-header">
        <h2>个人中心</h2>
        <button class="logout-button" @click="handleLogout">退出登录</button>
      </div>
      
      <div class="profile-info">
        <div class="user-basic-info">
          <div class="info-header">
            <h3>基本信息</h3>
            <button class="edit-button" @click="showEditForm = !showEditForm">
              {{ showEditForm ? '取消编辑' : '修改信息' }}
            </button>
          </div>
          <div class="user-stats">
            <div class="stat-item">
              <span class="stat-value">{{ currentUser.followingCount || 0 }}</span>
              <span class="stat-label">关注</span>
            </div>
            <div class="stat-item">
              <span class="stat-value">{{ currentUser.followersCount || 0 }}</span>
              <span class="stat-label">粉丝</span>
            </div>
            <div class="stat-item">
              <span class="stat-value">{{ userItems.length }}</span>
              <span class="stat-label">发布</span>
            </div>
          </div>
          <p><strong>用户名：</strong>{{ currentUser.username }}</p>
          <p><strong>个性签名：</strong>{{ currentUser.bio || '暂无个性签名' }}</p>
          <p><strong>注册时间：</strong>{{ formatDate(currentUser.createdAt) }}</p>
        </div>
        
        <!-- 修改信息表单 -->
        <div v-if="showEditForm" class="edit-profile-form">
          <form @submit.prevent="handleUpdateProfile">
            <div class="form-group">
              <label for="username">用户名</label>
              <input
                type="text"
                id="username"
                v-model="editProfile.username"
                placeholder="请输入用户名"
                required
              />
            </div>
            <div class="form-group">
              <label for="bio">个性签名</label>
              <textarea
                id="bio"
                v-model="editProfile.bio"
                placeholder="介绍一下自己吧"
                rows="3"
              ></textarea>
            </div>
            <div class="form-actions">
              <button type="submit" class="submit-button">保存修改</button>
              <button type="button" class="cancel-button" @click="showEditForm = false">取消</button>
            </div>
          </form>
        </div>
      </div>
      
      <!-- 留言功能 -->
      <div class="messages-section">
        <div class="section-header">
          <h3>我的留言</h3>
        </div>
        
        <!-- 发送留言 -->
        <div class="send-message">
          <textarea
            v-model="newMessage.text"
            placeholder="写下你的留言..."
            rows="3"
            @keydown.enter.ctrl="sendMessage"
          ></textarea>
          <button class="send-button" @click="sendMessage" :disabled="!newMessage.text.trim()">
            发送留言
          </button>
        </div>
        
        <!-- 留言列表 -->
        <div v-if="messages.length > 0" class="messages-list">
          <div v-for="message in messages" :key="message.id" class="message-item">
            <div class="message-header">
              <span class="message-author">{{ message.author }}</span>
              <span class="message-time">{{ formatDate(message.createdAt) }}</span>
            </div>
            <p class="message-content">{{ message.text }}</p>
            <div class="message-actions">
              <button v-if="message.author === currentUser.username" class="delete-message-button" @click="deleteMessage(message.id)">
                删除
              </button>
            </div>
          </div>
        </div>
        <div v-else class="no-messages">
          <p>暂无留言，快来写下第一条留言吧！</p>
        </div>
      </div>

      <div class="my-items">
        <div class="section-header">
          <h3>我的发布</h3>
          <button class="add-item-button" @click="showAddItemForm = !showAddItemForm">
            {{ showAddItemForm ? '取消' : '发布商品' }}
          </button>
        </div>

        <!-- 添加商品表单 -->
        <div v-if="showAddItemForm" class="add-item-form">
          <form @submit.prevent="handleAddItem">
            <div class="form-row">
              <div class="form-group">
                <label for="itemName">商品名称</label>
                <input
                  type="text"
                  id="itemName"
                  v-model="newItem.name"
                  placeholder="请输入商品名称"
                  required
                />
              </div>
              <div class="form-group">
                <label for="itemPrice">价格</label>
                <input
                  type="number"
                  id="itemPrice"
                  v-model.number="newItem.price"
                  placeholder="请输入价格"
                  required
                  min="0"
                  step="0.01"
                />
              </div>
            </div>
            <div class="form-group">
              <label for="itemDescription">描述</label>
              <textarea
                id="itemDescription"
                v-model="newItem.description"
                placeholder="请输入商品描述"
                required
                rows="3"
              ></textarea>
            </div>
            <button type="submit" class="submit-button">确认发布</button>
          </form>
        </div>

        <!-- 我的商品列表 -->
        <div v-if="userItems.length > 0" class="items-grid">
          <div v-for="item in userItems" :key="item.id" class="item-card">
            <div class="item-image">
              <img :src="item.image || 'https://picsum.photos/seed/' + item.id + '/200/200'" alt="商品图片" />
            </div>
            <div class="item-info">
              <h4>{{ item.name }}</h4>
              <p class="item-price">¥{{ item.price }}</p>
              <p class="item-description">{{ item.description }}</p>
              <div class="item-actions">
                <button @click="deleteItem(item.id)" class="delete-button">删除</button>
              </div>
            </div>
          </div>
        </div>
        <div v-else class="no-items">
          <p>您还没有发布任何商品</p>
        </div>
      </div>
    </div>

    <!-- 未登录状态 -->
    <div v-else class="not-logged-in">
      <h2>请先登录</h2>
      <p>您需要登录后才能查看个人信息</p>
      <router-link to="/login" class="login-button">去登录</router-link>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'

export default {
  name: 'ProfileView',
  setup() {
    const router = useRouter()
    const currentUser = ref(null)
    const showAddItemForm = ref(false)
    const newItem = ref({
      name: '',
      price: '',
      description: '',
      image: ''
    })
    
    // 新增：修改信息相关状态
    const showEditForm = ref(false)
    const editProfile = ref({
      username: '',
      bio: ''
    })
    
    // 新增：留言相关状态
    const messages = ref([])
    const newMessage = ref({
      text: ''
    })

    // 获取当前登录用户
    const getUserInfo = () => {
      const userData = localStorage.getItem('currentUser')
      if (userData) {
        currentUser.value = JSON.parse(userData)
        // 初始化编辑表单
        editProfile.value = {
          username: currentUser.value.username,
          bio: currentUser.value.bio || ''
        }
      }
    }

    // 获取用户发布的商品
    const userItems = computed(() => {
      if (!currentUser.value) return []
      // 从本地存储获取所有商品
      const allItems = JSON.parse(localStorage.getItem('items') || '[]')
      // 过滤出当前用户发布的商品
      return allItems.filter(item => item.sellerId === currentUser.value.id)
    })

    // 格式化日期
    const formatDate = (dateString) => {
      const date = new Date(dateString)
      return date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
      })
    }

    // 退出登录
    const handleLogout = () => {
      localStorage.removeItem('currentUser')
      currentUser.value = null
      router.push('/login')
    }

    // 添加商品
    const handleAddItem = () => {
      if (!currentUser.value) return

      const item = {
        id: Date.now().toString(),
        name: newItem.value.name,
        price: newItem.value.price,
        description: newItem.value.description,
        image: newItem.value.image,
        sellerId: currentUser.value.id,
        sellerName: currentUser.value.username,
        createdAt: new Date().toISOString()
      }

      // 保存到本地存储
      const allItems = JSON.parse(localStorage.getItem('items') || '[]')
      allItems.push(item)
      localStorage.setItem('items', JSON.stringify(allItems))

      // 清空表单
      newItem.value = {
        name: '',
        price: '',
        description: '',
        image: ''
      }
      showAddItemForm.value = false
    }

    // 删除商品
    const deleteItem = (itemId) => {
      if (confirm('确定要删除这个商品吗？')) {
        const allItems = JSON.parse(localStorage.getItem('items') || '[]')
        const updatedItems = allItems.filter(item => item.id !== itemId)
        localStorage.setItem('items', JSON.stringify(updatedItems))
      }
    }
    
    // 新增：更新用户信息
    const handleUpdateProfile = () => {
      if (!currentUser.value) return
      
      // 更新用户信息
      const updatedUser = {
        ...currentUser.value,
        username: editProfile.value.username,
        bio: editProfile.value.bio
      }
      
      // 保存到本地存储
      localStorage.setItem('currentUser', JSON.stringify(updatedUser))
      currentUser.value = updatedUser
      
      // 关闭编辑表单
      showEditForm.value = false
      alert('个人信息更新成功！')
    }
    
    // 新增：获取留言列表
    const getMessages = () => {
      // 从本地存储获取留言
      const storedMessages = JSON.parse(localStorage.getItem('messages') || '[]')
      messages.value = storedMessages
    }
    
    // 新增：发送留言
    const sendMessage = () => {
      if (!currentUser.value || !newMessage.value.text.trim()) return
      
      const message = {
        id: Date.now().toString(),
        text: newMessage.value.text.trim(),
        author: currentUser.value.username,
        createdAt: new Date().toISOString()
      }
      
      // 保存到本地存储
      const storedMessages = JSON.parse(localStorage.getItem('messages') || '[]')
      storedMessages.push(message)
      localStorage.setItem('messages', JSON.stringify(storedMessages))
      
      // 更新本地留言列表
      messages.value.push(message)
      
      // 清空输入框
      newMessage.value.text = ''
    }
    
    // 新增：删除留言
    const deleteMessage = (messageId) => {
      if (confirm('确定要删除这条留言吗？')) {
        const storedMessages = JSON.parse(localStorage.getItem('messages') || '[]')
        const updatedMessages = storedMessages.filter(msg => msg.id !== messageId)
        localStorage.setItem('messages', JSON.stringify(updatedMessages))
        messages.value = updatedMessages
      }
    }

    // 组件挂载时获取用户信息和留言
    onMounted(() => {
      getUserInfo()
      getMessages()
    })

    return {
      currentUser,
      showAddItemForm,
      newItem,
      userItems,
      formatDate,
      handleLogout,
      handleAddItem,
      deleteItem,
      // 新增返回值
      showEditForm,
      editProfile,
      handleUpdateProfile,
      messages,
      newMessage,
      sendMessage,
      deleteMessage
    }
  }
}
</script>

<style scoped>
/* CSS 变量定义 */
:root {
  --color-primary: #6366f1;
  --color-primary-light: #818cf8;
  --color-primary-dark: #4f46e5;
  --color-secondary: #ec4899;
  --color-success: #10b981;
  --color-danger: #ef4444;
  --color-warning: #f59e0b;
  --color-info: #3b82f6;
  --color-background: #f8fafc;
  --color-background-light: #f1f5f9;
  --color-background-dark: #e2e8f0;
  --color-text-primary: #1e293b;
  --color-text-secondary: #64748b;
  --color-text-tertiary: #94a3b8;
  --color-text-muted: #cbd5e1;
  --color-border: #e2e8f0;
  --color-card: #ffffff;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 3rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;
}

/* 个人中心容器 */
.profile-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-lg);
  min-height: calc(100vh - 200px);
  background-color: var(--color-background);
  background-image: 
    radial-gradient(at 40% 20%, rgba(99, 102, 241, 0.05) 0px, transparent 50%),
    radial-gradient(at 80% 0%, rgba(236, 72, 153, 0.05) 0px, transparent 50%),
    radial-gradient(at 0% 50%, rgba(59, 130, 246, 0.05) 0px, transparent 50%),
    radial-gradient(at 80% 50%, rgba(16, 185, 129, 0.05) 0px, transparent 50%),
    radial-gradient(at 0% 100%, rgba(245, 158, 11, 0.05) 0px, transparent 50%),
    radial-gradient(at 80% 100%, rgba(239, 68, 68, 0.05) 0px, transparent 50%);
}

/* 个人中心头部 */
.profile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-md);
  border-bottom: 2px solid var(--color-border);
  animation: fadeIn 0.7s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

@keyframes hoverScale {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.02);
  }
}

.profile-header h2 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 2rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.025em;
}

/* 通用按钮样式 */
button {
  font-family: inherit;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left var(--transition-slow);
}

button:hover::before {
  left: 100%;
}

/* 退出按钮 */
.logout-button {
  padding: 0.65rem 1.25rem;
  background-color: var(--color-danger);
  color: white;
  font-size: 0.9rem;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
}

.logout-button:hover {
  background-color: var(--color-danger);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* 个人信息卡片 */
.profile-info,
.messages-section,
.my-items,
.add-item-form {
  background: var(--color-card);
  padding: var(--spacing-xl);
  border-radius: var(--radius-xl);
  margin-bottom: var(--spacing-xl);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.profile-info::before,
.messages-section::before,
.my-items::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
}

.profile-info:hover,
.messages-section:hover,
.my-items:hover,
.add-item-form:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* 信息头部 */
.info-header,
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-lg);
}

.user-basic-info h3,
.section-header h3 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.025em;
}

/* 编辑按钮和其他主要按钮 */
.edit-button,
.add-item-button,
.submit-button,
.send-button {
  padding: 0.65rem 1.25rem;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: white;
  font-size: 0.9rem;
  box-shadow: 0 2px 4px rgba(99, 102, 241, 0.2);
}

.edit-button:hover,
.add-item-button:hover,
.submit-button:hover,
.send-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
}

.send-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  background: var(--color-background-dark);
}

/* 用户统计数据 */
.user-stats {
  display: flex;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-lg) 0;
  border-bottom: 1px solid var(--color-border);
  justify-content: center;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: var(--color-background-light);
  border-radius: var(--radius-lg);
  transition: all var(--transition-normal);
  min-width: 100px;
}

.stat-item:hover {
  background-color: var(--color-background-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.stat-value {
  font-size: 2rem;
  font-weight: bold;
  color: var(--color-primary);
  margin-bottom: var(--spacing-xs);
  font-variant-numeric: tabular-nums;
}

.stat-label {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* 个人信息文本 */
.user-basic-info p {
  margin: var(--spacing-md) 0;
  color: var(--color-text-secondary);
  font-size: 1rem;
  line-height: 1.6;
  display: flex;
  align-items: center;
}

.user-basic-info p strong {
  color: var(--color-text-primary);
  font-weight: 600;
  min-width: 80px;
  margin-right: var(--spacing-md);
}

/* 修改信息表单 */
.edit-profile-form {
  margin-top: var(--spacing-xl);
  padding: var(--spacing-xl);
  background-color: var(--color-background-light);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  animation: slideIn 0.5s ease-out;
}

.form-group {
  margin-bottom: var(--spacing-lg);
  position: relative;
}

.form-group label {
  display: block;
  margin-bottom: var(--spacing-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  font-size: 0.9rem;
  letter-spacing: 0.025em;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.875rem var(--spacing-md);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: 1rem;
  transition: all var(--transition-normal);
  background-color: white;
  font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
  transform: translateY(-1px);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}

.form-actions {
  display: flex;
  gap: var(--spacing-md);
  margin-top: var(--spacing-xl);
  justify-content: flex-end;
}

.cancel-button {
  padding: 0.65rem 1.25rem;
  background-color: var(--color-background-light);
  color: var(--color-text-secondary);
  border: 2px solid var(--color-border);
  font-size: 0.9rem;
}

.cancel-button:hover {
  background-color: var(--color-border);
  transform: translateY(-2px);
  color: var(--color-text-primary);
}

/* 留言区域 */
.send-message {
  margin-bottom: var(--spacing-xl);
}

.send-message textarea {
  width: 100%;
  padding: var(--spacing-lg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-xl);
  font-size: 1rem;
  transition: all var(--transition-normal);
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
  background-color: var(--color-background-light);
  margin-bottom: var(--spacing-md);
  font-family: inherit;
}

.send-message textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
  background-color: white;
  transform: translateY(-1px);
}

/* 留言列表 */
.messages-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.message-item {
  padding: var(--spacing-lg);
  background-color: var(--color-background-light);
  border-radius: var(--radius-xl);
  border-left: 4px solid var(--color-primary);
  transition: all var(--transition-normal);
  position: relative;
  animation: hoverScale 0.3s ease-out;
  animation-play-state: paused;
}

.message-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateX(8px);
  animation-play-state: running;
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
}

.message-author {
  font-weight: 600;
  color: var(--color-primary);
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.message-author::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: var(--color-success);
  border-radius: 50%;
}

.message-time {
  font-size: 0.8rem;
  color: var(--color-text-tertiary);
  font-style: italic;
}

.message-content {
  margin: 0 0 var(--spacing-md) 0;
  color: var(--color-text-secondary);
  line-height: 1.7;
  font-size: 1rem;
  word-break: break-word;
  padding: var(--spacing-sm) 0;
}

.message-actions {
  display: flex;
  justify-content: flex-end;
}

.delete-message-button,
.delete-button {
  padding: 0.4rem 0.8rem;
  background-color: var(--color-danger);
  color: white;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 0.85rem;
  transition: all var(--transition-normal);
}

.delete-message-button:hover,
.delete-button:hover {
  background-color: var(--color-danger);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.no-messages,
.no-items {
  text-align: center;
  padding: var(--spacing-xxl);
  color: var(--color-text-tertiary);
  background-color: var(--color-background-light);
  border-radius: var(--radius-xl);
  border: 2px dashed var(--color-border);
  position: relative;
  overflow: hidden;
}

.no-messages::before,
.no-items::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(99, 102, 241, 0.05) 10px,
    rgba(99, 102, 241, 0.05) 20px
  );
  animation: pulse 3s infinite;
}

.no-messages p,
.no-items p {
  margin: 0;
  font-size: 1.1rem;
  position: relative;
  z-index: 1;
}

/* 表单行 */
.form-row {
  display: flex;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-lg);
}

.form-row .form-group {
  flex: 1;
  margin-bottom: 0;
}

/* 商品网格 */
.items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--spacing-xl);
}

/* 商品卡片 */
.item-card {
  background: var(--color-card);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  position: relative;
}

.item-card:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-6px);
}

.item-card:hover .item-image img {
  transform: scale(1.1);
}

/* 商品图片 */
.item-image {
  height: 220px;
  overflow: hidden;
  position: relative;
}

.item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.item-image::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.1));
}

/* 商品信息 */
.item-info {
  padding: var(--spacing-lg);
}

.item-info h4 {
  margin: 0 0 var(--spacing-md) 0;
  color: var(--color-text-primary);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.025em;
  transition: color var(--transition-fast);
}

.item-card:hover .item-info h4 {
  color: var(--color-primary);
}

.item-price {
  color: var(--color-danger);
  font-weight: bold;
  margin: 0 0 var(--spacing-md) 0;
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
}

.item-description {
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  margin: 0 0 var(--spacing-lg) 0;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.item-actions {
  display: flex;
  justify-content: flex-end;
}

/* 未登录状态 */
.not-logged-in {
  text-align: center;
  padding: var(--spacing-xxl);
  background: var(--color-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  max-width: 500px;
  margin: 0 auto;
  animation: fadeIn 0.7s ease-out;
  border: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}

.not-logged-in::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
}

.not-logged-in h2 {
  margin-bottom: var(--spacing-md);
  color: var(--color-text-primary);
  font-size: 1.75rem;
  letter-spacing: -0.025em;
}

.not-logged-in p {
  margin-bottom: var(--spacing-xl);
  color: var(--color-text-secondary);
  font-size: 1rem;
  line-height: 1.6;
}

.login-button {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: white;
  text-decoration: none;
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: 1rem;
  transition: all var(--transition-normal);
  box-shadow: 0 2px 4px rgba(99, 102, 241, 0.2);
  position: relative;
  overflow: hidden;
}

.login-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left var(--transition-slow);
}

.login-button:hover::before {
  left: 100%;
}

.login-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
}

/* 响应式设计 */
@media (max-width: 768px) {
  .profile-container {
    padding: var(--spacing-md);
  }
  
  .profile-header {
    flex-direction: column;
    gap: var(--spacing-lg);
    text-align: center;
  }
  
  .profile-header h2 {
    font-size: 1.75rem;
  }
  
  .form-row {
    flex-direction: column;
    gap: var(--spacing-lg);
  }
  
  .items-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }
  
  .section-header,
  .info-header {
    flex-direction: column;
    gap: var(--spacing-md);
    text-align: center;
  }
  
  .user-stats {
    flex-direction: column;
    gap: var(--spacing-md);
    align-items: center;
  }
  
  .stat-item {
    width: 100%;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--spacing-md);
  }
  
  .stat-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  
  .form-actions {
    flex-direction: column;
  }
  
  .submit-button,
  .cancel-button {
    width: 100%;
  }
  
  .profile-info,
  .messages-section,
  .my-items,
  .add-item-form {
    padding: var(--spacing-lg);
  }
  
  .item-image {
    height: 200px;
  }
  
  .not-logged-in {
    padding: var(--spacing-lg);
  }
}

@media (max-width: 480px) {
  .profile-container {
    padding: var(--spacing-sm);
  }
  
  .profile-header h2 {
    font-size: 1.5rem;
  }
  
  .user-basic-info h3,
  .section-header h3 {
    font-size: 1.25rem;
  }
  
  .stat-value {
    font-size: 1.75rem;
  }
  
  .item-price {
    font-size: 1.25rem;
  }
}</style>